<template>
  <div id="business-detail">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
    </van-nav-bar>

    <!-- 详情 -->
    <div class="container">
      <!-- 订单号 -->
      <van-cell-group class="seller-info">
        <template #title>
          <span class="group-title">订单号</span>
          <span class="progress">#{{order.id}}</span>
        </template>
      </van-cell-group>

      <!-- 其他信息 -->
      <van-cell-group class="cell-group">
        <van-cell title="昵称" :value="order.nickName" />
        <!--<van-cell title="交易数量" :value="order.num + ' GST'" />-->
        <!--<van-cell title="单价" :value="order.price + ' CNY/GST'" />-->
        <!--<van-cell title="总金额" :value="order.sum + ' CNY'" value-class="total" />-->
        <van-cell title="交易数量" :value="order.num" />
        <van-cell title="单价" :value="order.price" />
        <van-cell title="总金额" :value="order.sum + ' CNY'" value-class="total" />
      </van-cell-group>
    </div>

    <!-- 底部按钮 -->
    <van-tabbar v-model="active" active-color="#545c80" inactive-color="#545c80">
      <van-tabbar-item @click="onBusiness">交易</van-tabbar-item>
    </van-tabbar>

    <!-- 输入交易密码弹窗 -->
    <van-dialog
      v-model="show"
      title="交易密码"
      closeOnClickOverlay
      :showConfirmButton="false"
    >
      <!-- 密码输入框 -->
      <van-password-input
        class="password-input"
        :value="payPassword"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
    </van-dialog>

    <!-- 数字键盘 -->
    <van-number-keyboard
      class="keyboard"
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
  import store from '@/store';
  import axios from 'axios';
  import Vue from 'vue';
  import { Toast } from 'vant';

  Vue.use(Toast);

  export default {
    name: "BusinessDetail",
    data() {
      return {
        order: {},            // 订单
        payPassword: '',      // 支付密码
        show: false,          // 控制密码输入框展示
        showKeyboard: false,  // 控制数字键盘展示
        active: 0,
        user: JSON.parse(sessionStorage.getItem('user')),
      };
    },
    methods: {
      back() {
        this.$router.back(-1);
      },

      // 交易
      onBusiness() {
        this.show = true;
        this.showKeyboard = true;
      },
      onInput(key) {
        this.payPassword = (this.payPassword + key).slice(0, 6);
      },
      onDelete() {
        this.payPassword = this.payPassword.slice(0, this.payPassword.length - 1);
      },
    },
    watch: {
      payPassword: function (val) {
        if (val.length === 6) {
          axios.get(store.state.api + '/market/sale', {
            params: {
              uid: this.user.uid,
              orderId: this.order.id,
              payPassword: val,
            }
          }).then(res => {
            this.show = false;
            this.showKeyboard = false;
            this.payPassword = '';

            if (res.data.code == '200') {
              Toast({
                message: res.data.msg,
                position: 'bottom',
              });
              this.$router.back(-1);
            } else {
              Toast({
                message: res.data.msg,
                position: 'bottom',
              });
            }
          }).catch(error => {
            Toast({
              message: '系统繁忙',
              position: 'bottom',
            });
          });
        }
      },
    },
    mounted() {
      // 获取订单详情
      axios.get(store.state.api + '/market/getOrderDetails', {
        params: {
          orderId: this.$route.params.id,
          uid: this.$route.params.uid,
        }
      }).then(res => {
        if (res.data.code == '200') {
          this.order = res.data.data;

        }
      }).catch(error => {

      });
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }

  /* 主体 */
  .container {
    position: fixed;
    top: 44px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
    background-color: #fff;
  }
  .seller-info .van-cell {
    background-color: #F6F7FB;
  }
  .group-title {
    color: #2E4356;
    font-size: 20px;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
  }
  .progress {
    color: #7486AA;
    float: right;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
  }
  .van-cell,.van-cell__value {
    color: #9FA6AE;
  }
  .van-cell__value {
    color: #585D61;
  }
  .seller-info {
    margin: 0 15px 15px;
  }
  .van-cell::after {
    border: none;
  }
  .cell-group::after {
    border: none;
  }
  .total {
    color: #7486AA;
    font-size: 20px;
  }

  .password-input {
    margin-bottom: 20px;
  }
  .keyboard {
    z-index: 3000;
  }
</style>
